<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<base href="<{$B_Url}>" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>在线客服系统</title> 
	
	<load href="__PUBLIC__/bootstrap/css/bootstrap.min.css" />
	<load href="__PUBLIC__/bootstrap/css/bootstrap-theme.min.css" />
	<load href="__PUBLIC__/admin/css/custorm.css" />
	<load href="__PUBLIC__/bootstrap/js/jquery.min.js" />
	<load href="__PUBLIC__/bootstrap/js/bootstrap.min.js" /> 
    <link rel="stylesheet" href="__PUBLIC__/index/css/kf.css" /> 
    <script type="text/javascript" src="__PUBLIC__/index/js/jquery.form.js" ></script> 
<style type="text/css">
body{ padding-top: 40px; padding-bottom:50px; }
.inlisthead{ background-color:#f0f0f0; font-size:15px; height:40px; min-height:40px; }
.inlisthead h2{ font-size:1.2em; line-height:40px; margin:0px; padding:0px 10px; }
.talkfoot{ background-color:#f0f0f0; font-size:14px; height:30px; }
.btn-toolbar{ padding:5px 10px; }
.toolbar{  padding:8px 10px; display:none; }
.toolbar span{ padding:0px 15px; }
.sendbox{ padding:5px 0px 5px 0px; margin:0px 10px; position: relative; }
.sendbox input{ position: absolute; right: 55px; border: 0px; left: 0px; line-height: 25px; padding: 5px; display: inline-block; min-width: auto; outline:none; border-radius:5px; }
.sendbox span{ background-color:rgba(0,0,0,0.1); position: absolute; right:5px; padding:0px 15px; height:35px; line-height:35px; text-align:center; border-radius:6px; margin-top:5px; }
.sendbox span:hover{ background-color:rgba(0,0,0,0.5); }
 
#talklistbox { 
}

#talklistbox dd{
	clear: both;
	margin:5px 0px; 
}

#talklistbox dd.l_you em , #talklistbox dd.l_me em {
    background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 30px;
	height: 30px;
	display: inline-block;
	border-radius: 6px;
}

#talklistbox dd.l_you em{ 
	float: left;
	margin-right: 5px;
}

#talklistbox dd.l_me em{ 
	float: right;
	margin-left: 5px;
}
#talklistbox dd.l_you p , #talklistbox dd.l_me p {
	max-width:76%;
	padding: 3px 5px;
    display: inline-block; 
}
#talklistbox dd p img{
	max-width: 100%;
}
#talklistbox dd.l_you p {
    border-image: url(/Public/index/image/you.png);
    border-image-slice: 6 6 6 15 fill;
    border-width: 6px 6px 6px 15px;
    color: #fff;
	float: left;
}

#talklistbox dd.l_me p{
    border-image: url(/Public/index/image/me.png);
    border-image-slice: 6 15 6 6 fill; 
    border-width: 6px 15px 6px 6px;
    color: #44B549; 
	float: right;
}

#talklistbox dd p i{
	display:inline-block;
	width:20px;
	height:20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#talklistbox dd.l_you p i{
	float: left;
	margin-left: -20px;
	background-image: url(/Public/index/image/p_left.png);
}
#talklistbox dd.l_me p i{
	float: right;
	margin-right: -20px;
	background-image: url(/Public/index/image/p_right.png);
}

</style>
</head>
<body>
<nav class="navbar inlisthead navbar-fixed-top"> 
  	<h2><span class="glyphicon glyphicon-chevron-left"></span> 与XXX聊天中</h2> 
</nav>

<nav class="navbar talkfoot navbar-fixed-bottom">
<!--
<div class="toolbar">
      <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
	  <span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>
	  <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
	  <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
  </div> 
-->
  <div class="sendbox">
  	<input id="sendText" type="email" placeholder="请输入信息" />
 	<span id="sendbtn" class="glyphicon glyphicon-send" aria-hidden="true"></span>
  </div> 
</nav>

<div id="talklistbox">
	<dl>
		<dd class="l_me">
			<em style="background-image:url(/Public/index/image/i_ico.jpg)"></em>
			<p><i></i>中华人民样？</p> 
		</dd>
		<dd class="l_you">
			<em style="background-image:url(/Public/index/image/y_ico.jpg)"></em>
			<p><i></i>中华人民共和国，你好，我想知道你想怎么样？</p> 
		</dd>
		<dd class="l_me">
			<em style="background-image:url(/Public/index/image/i_ico.jpg)"></em>
			<p><i></i>中华样？</p> 
		</dd>
		<dd class="l_you">
			<em style="background-image:url(/Public/index/image/y_ico.jpg)"></em>
			<p><i></i>中华人民共和国，你好，我想知道你想怎么样？</p> 
		</dd>
		<dd class="l_you">
			<em style="background-image:url(/Public/index/image/y_ico.jpg)"></em>
			<p><i></i><img src="/Public/index/image/pic.jpg" /></p> 
		</dd>
	</dl>
</div>
<div style="clear:both"></div>

<script language="javascript">
$(function(){
	$('#sendbtn').on('touchstart',function(){
		var txt = $('#sendText').val();
		if(txt.length<1) return false;
		$('#talklistbox dl').append('<dd class="l_me"><em style="background-image:url(/Public/index/image/i_ico.jpg)"></em><p><i></i>'+txt+'</p></dd>');
		$('#sendText').val('')
	}); 
});
</script>
</body>
</html>